<template>
  <div>
    <!-- 店铺管理,保存 -->
    <div class="clasTop">
      <p class="class-top">店铺管理</p>
      <el-button type="primary" @click="preserve">保存</el-button>
    </div>
    <el-form
      label-position="right"
      label-width="80px"
      :model="infor"
      style="margin-top: 20px;width:600px"
    >
      <el-form-item label="店铺名称">
        <el-input v-model="infor.name" style="width: 400px"></el-input>
      </el-form-item>
      <el-form-item label="店铺公告">
        <el-input
          type="textarea"
          v-model="infor.bulletin"
          style="width: 400px"
          :rows="4"
        ></el-input>
      </el-form-item>
      <el-form-item label="店铺头像">
        <el-upload
          class="avatar-uploader"
          action="http://127.0.0.1:5000/shop/upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
        >
          <img :src="infor.avatar" class="avatar"  style="width:150px;height:150px"/>
        </el-upload>
      </el-form-item>
      <!-- 头像 -->
      <el-form-item label="店铺图片">
        <!-- 这是上传图片 -->
        <el-upload
          action="http://127.0.0.1:5000/shop/upload"
          list-type="picture-card"
          :file-list="fileList"
          :on-success="handUpload"
          :on-remove="uploadremove"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>

      <el-form-item label="起送价格">
        <el-input
          v-model="infor.minPrice"
          style="width: 400px"
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item label="配送费">
        <el-input v-model="infor.deliveryPrice" style="width: 400px"></el-input>
      </el-form-item>
      <el-form-item label="配送时间">
        <el-input v-model="infor.deliveryTime" style="width: 400px"></el-input>
      </el-form-item>
      <el-form-item label="配送描述">
        <el-input v-model="infor.description" style="width: 400px"></el-input>
      </el-form-item>
      <el-form-item label="店铺评分">
        <el-input v-model="infor.score" style="width: 400px" disabled></el-input>
      </el-form-item>
      <el-form-item label="销量">
        <el-input v-model="infor.sellCount" style="width: 400px" disabled></el-input>
      </el-form-item>
      <el-form-item label="活动" style="width: 600px">
        <el-checkbox-group v-model="infor.supports" v-for="item in supports" :key="item">
<el-checkbox  :label="item" name="type"></el-checkbox>
        </el-checkbox-group>
        <el-input
  placeholder="请输入内容"
  v-model="addspport"
  clearable style="width:200px;margin-right:20px"></el-input><el-button type="primary" @click="additem">添加</el-button>
      </el-form-item>
      <el-form-item label="营业时间">
        <el-time-picker
          is-range
          value-format='yyyy-MM-dd HH:mm:ss'
          v-model="infor.date"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="选择时间范围"
        >
        </el-time-picker>        
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { shopInfor ,shopEdit} from "@/apis/shop";
// import {getYYYYMMDDhhmmss} from "@/utils/utile"
//  ,shopEdit
export default {
  data() {
    return {
      fileList: [], //后台本身图片
      editList:[],    //用来保存修改后的图片数组
      supports: [],   //  活动支持方式
      dialogImageUrl: "", //店铺图片上传后回填
      infor: {},   //店铺的信息
      addspport:''    //添加活动
    };  
  },
  methods: {
    // 上传头像
    handleAvatarSuccess(res) {
     // console.log(res);
       let oldurl = this.infor.avatar;
       this.infor.avatar=oldurl.substring(0,oldurl.lastIndexOf('/')+1)+res.imgUrl
    },
    // 上传店铺图像
    handUpload(res,file) {
      this.dialogImageUrl = file.url;   //回填的图片
      this.editList.push(res.imgUrl)   //传给后台的图片数组
       //console.log(this.editList,'上传店铺图片');
    },
    //添加活动方式
    additem(){
this.supports.push(this.addspport)
    },
  //删除照片
  uploadremove(file){
// console.log(file);
let imgUrl=file.response ? file.response.imgUrl:file.name
for (let i = 0; i < this.editList.length; i++) {
 if(imgUrl==this.editList[i]){
   this.editList.splice(i,1)
   break
 } 
}
  },
    //点击保存
preserve() {
let {id,name,bulletin,deliveryPrice,deliveryTime,description,score,sellCount,avatar}=this.infor
let data={
  id,
  name,
  bulletin,
  deliveryPrice,
  deliveryTime,
  description,
  score,
  sellCount,
  avatar:avatar.substring(avatar.lastIndexOf('/')+1),
supports:JSON.stringify(this.infor.supports),
 date:JSON.stringify(this.infor.date),
 pics:JSON.stringify(this.editList) 
}
shopEdit(data).then(res=>{
if (res.data.code==0) {
    this.$message({
          message: '尊敬的用户，您已成功修改店铺信息',
          type: 'success'
        });
}
})
    },
  },
  created() {
    //获取店铺详情
    shopInfor().then((res) => {
      this.infor =res.data.data;    //店铺信息
      // console.log(this.infor,'数据');   
      this.supports =  JSON.parse(JSON.stringify(this.infor.supports));   //支持的活dong
      //老图片数组,顺便把图片push到要修改的editList数组
      this.fileList=this.infor.pics.map((url)=>{
        let imgname=url.substring(url.lastIndexOf('/')+1)
        this.editList.push(imgname)
        return {name:imgname,url}
      })
   
    });
  },
};
</script>

<style lang="less">
.clasTop {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #dcdfe6;
  p {
    border-bottom: 0px solid #dcdfe6;
  }
  button {
    width: 80px;
    padding: 0;
    height: 35px;
  }
}

.avatar-uploader .el-upload {
  // border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>